<template>
    <router-view class="style-light"></router-view>
    <div class="style-light all-sub-window">
        <!-- 退出登录询问框 -->
        <LogoutModel></LogoutModel>
        <!-- 语言选择 -->
        <Language></Language>
        <!-- 平仓弹窗 -->
        <StockCloseModel></StockCloseModel>
        <!-- 加载框 -->
        <LoadingModel></LoadingModel>
        <!-- Toast -->
        <Toast></Toast>
    </div>
</template>

<script setup>
// 在全局控制 websocket 的连接
import { onMounted, onUnmounted } from 'vue';
import { history_ws, realtime_ws, closeAllConnection } from '@/service/market.js';
import { marketService } from '@/service/market.js';

// 所有弹窗的逻辑都放在这里
import LogoutModel from '@/components/sub_window/LogoutModel.vue';
import Language from '@/components/sub_window/Language.vue';
import StockCloseModel from '@/components/sub_window/StockCloseModel.vue';
import LoadingModel from '@/components/sub_window/LoadingModel.vue';
import Toast from './components/sub_window/Toast.vue';

onMounted(async () => {
    // 获取市场状态
    marketService.getMarketStatus();
    // 获取市场数据 - 使用 await 避免股票价格拿到之后更新不到位
    await marketService.getMarketList();
    // 建立 websocket 连接持续更新状态以及k线
    history_ws.init();
    realtime_ws.init();
});

onUnmounted(() => {
    // 断开所有 websocket 连接
    closeAllConnection();
});
</script>

<style scoped lang="less">
.all-sub-window {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}
</style>
